<template>
    <div>slot子组件</div>
    <div>
        无渲染组件概念：含slot的子组件里面只写逻辑，当有视图更新时，通过作用域插槽把数据交给父组件更新
    </div>

    <div style="color:red;width:600px;background:#fff;margin-left:30px;">
        <slot :text="text" :count="1">
            默认插槽数据，当父组件使用该组件，没用添加任何内容时显示这句话
        </slot>
    </div>
    <div style="color:green;width:600px;background:#fff;margin:30px;">
        <slot name="main" sayhi="具名插槽收到子组件数据(子组件里传值时不能加:)">

        </slot>
    </div>
    <div style="color:blue;width:600px;background:#fff;margin:30px;">
        <slot name="footer">

        </slot>
    </div>

</template>
    
<script setup lang="ts">
import { ref } from 'vue'
const text = ref('我是子组件数据')

</script>
<style scoped>

</style>
